<template>
  <div class="meeting-header">
    <div class="meeting-info">
      <span class="meeting-title">{{ meetingInfo.title }}</span>
      <span class="meeting-title">会议号：{{ meetingInfo.roomId }}</span>
      <span class="meeting-time">会议时间：{{ meetingInfo.time }}</span>
    </div>
    <div class="header-controls">
      <button class="header-btn" @click="$emit('invite-member')">邀请</button>
      <button class="header-btn">安全</button>
      <button class="header-btn">设置</button>
      <button class="header-btn">最小化</button>
      <button class="header-btn">最大化</button>
      <button class="header-btn">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MeetingHeader',
  props: {
    meetingInfo: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
@import '../styles/meeting-header.css';
</style>